<template>
    <div class="content" ref="content">
        <LoadingPage :imageUrl="headerImageUrl"></LoadingPage>
        <BayWindow></BayWindow>
        <div :style="{ 'min-height': minHeight + 'px' }">
            <Hander :imageUrl="headerImageUrl" :hoverColor="hoverColor" :navigationColor="navigationColor"></Hander>
            <div class="middle">
                <transition name="fade" mode="out-in">
                    <router-view></router-view>
                </transition>
            </div>
        </div>
        <div ref="footer">
            <Footer :endData="endData" :navigationColor="navigationColor"></Footer>
        </div>
    </div>
</template>

<script>
import $baseUrl from '@/utils/baseURL';
import homepageApi from "@/api/homepage"
import Hander from "@/components-website/hander.vue" //头部导航栏
import Footer from "@/components-website/footer.vue" //底部
import LoadingPage from "./page/loadingPage.vue" //引导页
import BayWindow from "@/components-website/bayWindow.vue" //飘窗


export default {
    name: 'App',
    components: {
        Hander,
        Footer,
        BayWindow,
        LoadingPage
    },
    data() {
        return {
            minHeight: 1000,
            headerImageUrl: '',
            endData: {},
            hoverColor:'#137bff',
            navigationColor:'#164fa6'
        }
    },
    mounted() {
        this.handleHeight();
        this.queryEndPage();
    },
    watch: {
        $route: {
            handler: function (val, oldVal) {
                this.handleHeight()
            },
            // 深度观察监听
            deep: true
        }
    },
    methods: {
        toSys() {
            this.$router.push({ path: '/login' })
        },
        async queryEndPage() {
            let { data } = await homepageApi.queryEndPage();
            this.endData = data || {}
            let backgroundImageUrl = `${$baseUrl.fileServiceUrl}portalWebsite/files/download?fileId=${data.backgroundImage}`
            this.headerImageUrl = `${$baseUrl.fileServiceUrl}portalWebsite/files/download?fileId=${data.headerImage}`
            this.navigationColor = data.navigationColor||'#164fa6'
            this.hoverColor = data.hoverColor||'#137bff'
            this.$refs.content.style.backgroundImage = `url(${backgroundImageUrl})`
        },
        handleHeight() {
            const handerfooter = this.$refs.footer;
            const handercontent = this.$refs.content;
            const f_height = handerfooter.offsetHeight;
            const c_height = handercontent.offsetHeight;
            // this.minHeight = c_height - f_height;
            console.log(f_height, c_height)
        }
    }
}
</script>

<style lang="scss" scoped>
.content {
    width: 100%;
    // background-image: url(../../assets/bg.png);
    background-size: 100%;
    background-repeat: no-repeat;
    // overflow-y: auto;

    .middle {
        width: 1200px;
        margin: 0 auto;
        margin-top: 10px;
    }

    .toSys {
        width: 1200px;
        margin: 0 auto;
        line-height: 30px;
        text-align: right;
        color: rgb(2, 54, 96);
        cursor: pointer;
    }
}



.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}
</style>